<template>
  <div>
    <div style="width: 100%; display: flex; justify-content: space-between;">
      <div style="width: 400px; height: 400px; border: 1px solid #333;" id="radar"></div>
      <div style="width: 400px; height: 400px; border: 1px solid #333;" id="radar2"></div>
    </div>
    <br>
    <a-button @click="switchData">切换雷达图数据</a-button>
  </div>
</template>

<script>
import { Radar } from '@antv/g2plot'

export default {
  name: 'RadarChart',
  data () {
    return {
      // 雷达图
      radarPlot: null,
      radarPlot2: null,
      radarData: [
        {
          item: '很长很长的文字',
          user: 'a',
          score: 100
        },
        {
          item: '很长很长的文字',
          user: 'b',
          score: 30
        },
        {
          item: 'Development',
          user: 'a',
          score: 100
        },
        {
          item: 'Development',
          user: 'b',
          score: 30
        },
        {
          item: 'Marketing',
          user: 'a',
          score: 100
        },
        {
          item: 'Marketing',
          user: 'b',
          score: 30
        }
      ],
      radarData2: [
        {
          item: '很长很长的文字',
          user: 'a',
          score: 90
        },
        {
          item: 'Development',
          user: 'a',
          score: 90
        },
        {
          item: 'Marketing',
          user: 'a',
          score: 90
        },
        {
          item: 'Marketing2',
          user: 'a',
          score: 90
        },
        {
          item: 'Marketing3',
          user: 'a',
          score: 90
        }
      ]
    }
  },
  created () {
    const radarData2 = JSON.parse(JSON.stringify(this.radarData2))
    radarData2.forEach(item => {
      const cloneText = item.item
      item.complete = cloneText
      item.item = cloneText.slice(0, 3).concat('...')
    })
    // this.radarData2 = radarData2
    console.log(JSON.stringify(this.radarData2))
  },
  mounted () {
    this.renderRadar()
    this.renderRadar2()
  },
  methods: {
    // 生成雷达图
    renderRadar2 () {
      this.radarPlot2 = new Radar('radar2', {
        data: this.radarData2,
        // 设置 meta 数据，避免维度相等时直接显示为圆点
        meta: {
          score: {
            min: 0,
            max: 100
          }
        },
        // tooltip: {
        //   customContent: (title, data) => {
        //     if (data.length) {
        //       return `<div>${data[0].data.complete}</div>`
        //     }
        //   }
        // },
        xField: 'item',
        yField: 'score',
        seriesField: 'user',
        xAxis: {
          line: null,
          tickLine: null,
          grid: {
            line: {
              style: {
                lineDash: null
              }
            }
          }
        },
        yAxis: {
          line: null,
          tickLine: null,
          grid: {
            line: {
              type: 'line',
              style: {
                lineDash: null
              }
            },
            alternateColor: 'rgba(0, 0, 0, .1)'
          }
        },
        // 开启面积
        area: {},
        point: {}
      })
      this.radarPlot2.render()
    },
    // 生成雷达图
    renderRadar () {
      this.radarPlot = new Radar('radar', {
        data: this.radarData,
        // 设置 meta 数据，避免维度相等时直接显示为圆点
        meta: {
          score: {
            min: 0,
            max: 100
          }
        },
        label: {
          style: {
            color: 'red'
          }
        },
        xField: 'item',
        yField: 'score',
        seriesField: 'user',
        xAxis: {
          label: {
            offset: 15
          },
          grid: {
            line: {
              type: 'line'
            }
          }
        },
        yAxis: {
          grid: {
            line: {
              type: 'circle'
            }
          }
        },
        point: {
          shape: 'circle'
        },
        // 开启面积
        area: {},
        legend: {
          position: 'bottom'
        }
      })
      this.radarPlot.render()
    },
    switchData () {
      const data = [
        {
          item: '很长很长的文字',
          user: 'a2',
          score: 70
        },
        {
          item: '很长很长的文字',
          user: 'b',
          score: 40
        },
        {
          item: 'Development',
          user: 'a2',
          score: 50
        },
        {
          item: 'Development',
          user: 'b',
          score: 80
        },
        {
          item: 'Marketing',
          user: 'a2',
          score: 50
        },
        {
          item: 'Marketing',
          user: 'b',
          score: 60
        }
      ]
      this.radarPlot.update({
        ...{
          data,
          xField: 'item',
          yField: 'score',
          seriesField: 'user',
          xAxis: {
            label: {
              offset: 15
            },
            grid: {
              line: {
                type: 'line'
              }
            }
          },
          yAxis: {
            grid: {
              line: {
                type: 'circle'
              }
            }
          },
          point: {
            shape: 'circle'
          },
          // 开启面积
          area: {},
          legend: {
            position: 'bottom'
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
